Skip to content

Sayali: dark mode background for Reports People page#5015

Merged
one-community merged 3 commits intodevelopmentfrom
Sayali_Fix_ReportsPeople_DarkMode
Apr 22, 2026
Merged

Sayali: dark mode background for Reports People page#5015
one-community merged 3 commits intodevelopmentfrom
Sayali_Fix_ReportsPeople_DarkMode

Conversation

@sayali-2308
Copy link
Copy Markdown
Contributor

@sayali-2308 sayali-2308 commented Mar 18, 2026

image

Description

Fixes Reports People page dark mode background issue (Priority Medium)
The Reports → People page had incorrect background colors in dark mode. This PR fixes the background styling across all components of the People report page.

Related PRS (if any):

None (standalone fix)

Main changes explained:

  • Updated ReportPage.module.css to add .report-page-wrapper-dark class with proper dark background (#0b1d3a)
  • Changed ReportPage.jsx to use the custom CSS class instead of Bootstrap's bg-oxford-blue
  • Updated ReportBlock.jsx background color from #3A506B to #1a2639 for better dark mode contrast
  • All child components (PeopleTable, PeopleTableDetails, TableFilter) now inherit proper dark mode styling

How to test:

  1. Check out branch Sayali_Fix_ReportsPeople_DarkMode
  2. npm install && npm run start:local
  3. Clear cache, log in as admin
  4. Navigate to Dashboard → Reports dropdown → Reports → People
  5. Verify the page background is dark (#0b1d3a)
  6. Click on any person to view their individual report
  7. Verify all sections have proper dark backgrounds:
  • Statistics cards (Weekly Committed Hours, etc.)
  • Pie charts section
  • Tasks table
  • Right sidebar with user info
  1. Toggle dark mode off/on to verify both modes work correctly

Screenshots or videos of changes:

image image

Note:

This is a frontend-only change focusing on the Reports People page and individual person report view. The fix uses CSS modules to avoid conflicts with other pages.

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 18, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit d8c5e21
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69dd67cebbd11d0008bfcdba
😎 Deploy Preview https://deploy-preview-5015--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@one-community one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Apr 6, 2026
Copy link
Copy Markdown

@HemanthNidamanuru HemanthNidamanuru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Sayali,

I have reviewed your PR locally. Most of the dark mode fixes are working correctly. However, I noticed a couple of issues that I believe fall under the scope of this PR:

  1. The "Total Hours" text is not styled correctly in dark mode.
  2. The "Clear Filters" button is not styled correctly in dark mode.

Could you confirm if these fall under the scope of this PR?

Image

Copy link
Copy Markdown

@Anusha-Gali Anusha-Gali left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Sayali,

I have reviewed your PR locally and though dark mode is applied to most components. The below require your fix:

  • The Total hours text is not well adapted to dark mode
  • The toggle is not visible in dark mode
  • The Clear Filters text is not well adapted to dark mode
  • The graphs axis is not visible in dark mode
Image Image Image Image Image

@sayali-2308
Copy link
Copy Markdown
Contributor Author

Hi @HemanthNidamanuru and @Anusha-Gali thank you for the thorough review!
The original task (PR-4283) was scoped specifically to fixing the background colour issue on the Reports → People page in dark mode. The items you've flagged (Total Hours text, Clear Filters button/text, toggle visibility, graph axis colours) go beyond that original scope.

@one-community
Copy link
Copy Markdown
Member

Hi @HemanthNidamanuru and @Anusha-Gali thank you for the thorough review! The original task (PR-4283) was scoped specifically to fixing the background colour issue on the Reports → People page in dark mode. The items you've flagged (Total Hours text, Clear Filters button/text, toggle visibility, graph axis colours) go beyond that original scope.

Please fix the rest of the requests on this, those are all darkmode issues so I consider them “in scope” and not something I want to create a new task for

@sonarqubecloud
Copy link
Copy Markdown

@sayali-2308
Copy link
Copy Markdown
Contributor Author

Hi @HemanthNidamanuru and @Anusha-Gali thank you for the detailed feedback!
I have addressed all the issues raised:

  • Total Hours text — now styled correctly in dark mode
  • Toggle — now visible in dark mode
  • Clear Filters button — verified working correctly in dark mode
  • Graph axis labels — now visible in dark mode
  • Graph backgrounds — updated to dark theme
  • Tooltip popups and legend text — now styled for dark mode
    Please re-review it. Let me know if anything else needs attention!

Copy link
Copy Markdown

@rajanidi1999 rajanidi1999 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,
I have reviewed your PR locally. Most of the dark mode fixes are working correctly.

Image

Copy link
Copy Markdown

@Anusha-Gali Anusha-Gali left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Anusha-Gali
The .text-light .table-filter-item rule in TableFilter.css was pre-existing and not part of my changes. My PR only touches the files listed above. The Clear Filters styling issue is out of scope for this task

Copy link
Copy Markdown

@rithika-paii rithika-paii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Sayali,
I reviewed PR#5015 and tested it locally; all the changes are implemented and look good from my end.

Image

@sayali-2308 sayali-2308 requested a review from Anusha-Gali April 21, 2026 09:58
@one-community
Copy link
Copy Markdown
Member

Thank you all, merging! Will make the remaining bits a new task.

@one-community one-community merged commit 9877dea into development Apr 22, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants